<template>
	<view class="jg-index">
		<u-navbar title="财务管理">
			<view slot="right" style="margin-right: 40upx;font-size: 40upx;font-weight: bold;margin-bottom: 30upx;" @click="getRouter">...</view>
		</u-navbar>
		<view class="content">
			<view class="site-header">
				<view class="site-header-left">
					<view style="display: flex;align-items: center;">
						<view class="site-header-font">当前余额</view>
						<image src="../../static/huabanfuben.png" style="width: 25upx;height: 16upx;margin-left: 25upx;"/>
					</view>
					<view class="font-36" style="margin-top: 5upx;">5498.00</view>
				</view>
				<view class="subtransactions-right">
					<u-button size="default" @click="Recharge()">充值</u-button>
				</view>
			</view>
		</view>
		<view class="nav-contain">
			<view class="nav-fl">
				<view v-for="(item,index) in list" :key="index">
					<view :class="curror == index ? 'nav-fl-div-ch' : 'nav-fl-div'" @click="getCurror(index, item.name)">{{ item.name }}</view>
				</view>
			</view>
			<!-- 账户确认 -->
			<view class="nav-fl-lb" v-if="curror == '2'">
				<u-row gutter="16" class="nav-fl-lb1">
					<u-col span="7">
						<view class="demo-layout bg-purple">账单ID：cz00681618384926</view>
					</u-col>
					<u-col span="5">
						<view class="demo-layout bg-purple-light">2021.04.14 15：06</view>
					</u-col>
				</u-row>
				<u-row gutter="16" class="nav-fl-lb2">
					<u-col span="12">
						<view class="demo-layout bg-purple">账单金额：2000.00</view>
					</u-col>
				</u-row>
				<u-row gutter="16" class="nav-fl-lb4 nav-fl-lb-cancel">
					<u-col span="9">
						<view class="demo-layout bg-purple">账单类型：返佣费</view>
					</u-col>
					<u-col span="3">
						<view class="demo-layout bg-purple-light">
							<!-- 有钱情况下 -->
							<!-- <view class="tck-box">
								<u-modal v-model="showc" :content="contentc" show-confirm-button show-cancel-button title="确认账单" confirm-text="确定" cancel-text="关闭"></u-modal>
								<u-button size="default" @click="openc" class="nav-fl-lb4-botton">确认账单</u-button>
							</view> -->
							<!-- 没钱情况下 -->
							<view class="tck-box">
								<u-modal v-model="showd" :content="contentd" show-confirm-button show-cancel-button title="余额不足" confirm-text="去充值" cancel-text="暂不"></u-modal>
								<u-button size="default" @click="opend" class="nav-fl-lb4-botton">确认账单</u-button>
							</view>
						</view>
					</u-col>
				</u-row>
			</view>
			<!-- 账户已确认 -->
			<view class="nav-fl-lb" v-if="curror == '2'">
				<u-row gutter="16" class="nav-fl-lb1">
					<u-col span="7">
						<view class="demo-layout bg-purple">账单ID：cz00681618384926</view>
					</u-col>
					<u-col span="5">
						<view class="demo-layout bg-purple-light">2021.04.14 15：06</view>
					</u-col>
				</u-row>
				<u-row gutter="16" class="nav-fl-lb2">
					<u-col span="12">
						<view class="demo-layout bg-purple">账单金额：2000.00</view>
					</u-col>
				</u-row>
				<u-row gutter="16" class="nav-fl-lb4 nav-fl-lb-cancel">
					<u-col span="9">
						<view class="demo-layout bg-purple">账单类型：返佣费</view>
					</u-col>
					<u-col span="3">
						<view class="demo-layout bg-purple-light"><u-button size="default" class="nav-fl-lb4-botton nav-fl-lb4-botton1">已确认</u-button></view>
					</u-col>
				</u-row>
			</view>
			<!-- 消费记录 -->
			<view class="nav-fl-lb" v-if="curror == '1'">
				<u-row gutter="16" class="nav-fl-lb1">
					<u-col span="12">
						<view class="demo-layout bg-purple">账单ID：cz00681618384926</view>
					</u-col>
				</u-row>
				<u-row gutter="16" class="nav-fl-lb2">
					<u-col span="8">
						<view class="demo-layout bg-purple">返佣费</view>
					</u-col>
					<u-col span="4">
						<view class="demo-layout bg-purple-light">- 20000.00</view>
					</u-col>
				</u-row>
				<u-row gutter="16" class="nav-fl-lb3 nav-fl-lb-cancel">
					<u-col span="8">
						<view class="demo-layout bg-purple">2021.04.14 15：06</view>
					</u-col>
					<u-col span="4">
						<view class="demo-layout bg-purple-light">余额 5498.00</view>
					</u-col>
				</u-row>
			</view>
			<!-- 待确认 -->
			<view class="nav-fl-lb" v-if="curror == '0'">
				<u-row gutter="16" class="nav-fl-lb1">
					<u-col span="8">
						<view class="demo-layout bg-purple">账单ID：cz00681618384926</view>
					</u-col>
					<u-col span="4">
						<view class="demo-layout bg-purple-light">待确认</view>
					</u-col>
				</u-row>
				<u-row gutter="16" class="nav-fl-lb2">
					<u-col span="8">
						<view class="demo-layout bg-purple">充值金额</view>
					</u-col>
					<u-col span="4">
						<view class="demo-layout bg-purple-light">+ 20000.00</view>
					</u-col>
				</u-row>
				<u-row gutter="16" class="nav-fl-lb3">
					<u-col span="12">
						<view class="demo-layout bg-purple">2021.04.14 15：06</view>
					</u-col>
				</u-row>
				<u-row gutter="16" class="nav-fl-lb4">
					<u-col span="9">
						<view class="demo-layout bg-purple">付款方式：对公账户</view>
					</u-col>
					<u-col span="3">
						<view class="demo-layout bg-purple-light"><u-button size="default" class="nav-fl-lb4-botton">充值中</u-button></view>
					</u-col>
				</u-row>
			</view>
			<!-- 充值成功 -->
			<view class="nav-fl-lb" v-if="curror == '0'">
				<u-row gutter="16" class="nav-fl-lb1">
					<u-col span="8">
						<view class="demo-layout bg-purple">账单ID：cz00681618384926</view>
					</u-col>
					<u-col span="4">
						<view class="demo-layout bg-purple-light">充值成功</view>
					</u-col>
				</u-row>
				<u-row gutter="16" class="nav-fl-lb2">
					<u-col span="8">
						<view class="demo-layout bg-purple">充值金额</view>
					</u-col>
					<u-col span="4">
						<view class="demo-layout bg-purple-light">+ 20000.00</view>
					</u-col>
				</u-row>
				<u-row gutter="16" class="nav-fl-lb3">
					<u-col span="12">
						<view class="demo-layout bg-purple">2021.04.14 15：06</view>
					</u-col>
				</u-row>
				<u-row gutter="16" class="nav-fl-lb4">
					<u-col span="12">
						<view class="demo-layout bg-purple" style="text-align: right;">付款方式：对公账户</view>
					</u-col>
				</u-row>
			</view>
			<!-- 充值成功,查看发票 -->
			<view class="nav-fl-lb" v-if="curror == '0'">
				<u-row gutter="16" class="nav-fl-lb1">
					<u-col span="8">
						<view class="demo-layout bg-purple">账单ID：cz00681618384926</view>
					</u-col>
					<u-col span="4">
						<view class="demo-layout bg-purple-light">充值成功</view>
					</u-col>
				</u-row>
				<u-row gutter="16" class="nav-fl-lb2">
					<u-col span="8">
						<view class="demo-layout bg-purple">充值金额</view>
					</u-col>
					<u-col span="4">
						<view class="demo-layout bg-purple-light">+ 20000.00</view>
					</u-col>
				</u-row>
				<u-row gutter="16" class="nav-fl-lb3">
					<u-col span="12">
						<view class="demo-layout bg-purple">2021.04.14 15：06</view>
					</u-col>
				</u-row>
				<u-row gutter="16" class="nav-fl-lb4">
					<u-col span="9">
						<view class="demo-layout bg-purple">付款方式：对公账户</view>
					</u-col>
					<u-col span="3">
						<view class="demo-layout bg-purple-light">
							<view class="tck-box">
								<u-modal v-model="showb" :content="contentb" show-confirm-button show-cancel-button title="查看发票" confirm-text="确定" cancel-text="关闭"></u-modal>
								<u-button size="default" @click="openb" class="nav-fl-lb4-botton">查看发票</u-button>
							</view>
						</view>
					</u-col>
				</u-row>
			</view>
			<!-- 充值成功,发票下载 -->
			<view class="nav-fl-lb" v-if="curror == '0'">
				<u-row gutter="16" class="nav-fl-lb1">
					<u-col span="8">
						<view class="demo-layout bg-purple">账单ID：cz00681618384926</view>
					</u-col>
					<u-col span="4">
						<view class="demo-layout bg-purple-light">充值成功</view>
					</u-col>
				</u-row>
				<u-row gutter="16" class="nav-fl-lb2">
					<u-col span="8">
						<view class="demo-layout bg-purple">充值金额</view>
					</u-col>
					<u-col span="4">
						<view class="demo-layout bg-purple-light">+ 20000.00</view>
					</u-col>
				</u-row>
				<u-row gutter="16" class="nav-fl-lb3">
					<u-col span="12">
						<view class="demo-layout bg-purple">2021.04.14 15：06</view>
					</u-col>
				</u-row>
				<u-row gutter="16" class="nav-fl-lb4">
					<u-col span="9">
						<view class="demo-layout bg-purple">付款方式：对公账户</view>
					</u-col>
					<u-col span="3">
						<view class="demo-layout bg-purple-light">
							<view class="tck-box">
								<u-modal v-model="showa" show-confirm-button show-cancel-button title="发票下载" confirm-text="下载" cancel-text="关闭">
									<image src="../../static/ljx.png" style="width: 100%;margin: 35upx 0;"></image>
								</u-modal>
								<u-button size="default" @click="opena" class="nav-fl-lb4-botton">发票下载</u-button>
							</view>
						</view>
					</u-col>
				</u-row>
			</view>
			<!-- 充值成功,开票 -->
			<view class="nav-fl-lb" v-if="curror == '0'">
				<u-row gutter="16" class="nav-fl-lb1">
					<u-col span="8">
						<view class="demo-layout bg-purple">账单ID：cz00681618384926</view>
					</u-col>
					<u-col span="4">
						<view class="demo-layout bg-purple-light">充值成功</view>
					</u-col>
				</u-row>
				<u-row gutter="16" class="nav-fl-lb2">
					<u-col span="8">
						<view class="demo-layout bg-purple">充值金额</view>
					</u-col>
					<u-col span="4">
						<view class="demo-layout bg-purple-light">+ 20000.00</view>
					</u-col>
				</u-row>
				<u-row gutter="16" class="nav-fl-lb3">
					<u-col span="12">
						<view class="demo-layout bg-purple">2021.04.14 15：06</view>
					</u-col>
				</u-row>
				<u-row gutter="16" class="nav-fl-lb4">
					<u-col span="9">
						<view class="demo-layout bg-purple">付款方式：对公账户</view>
					</u-col>
					<u-col span="3">
						<view class="demo-layout bg-purple-light">
							<u-button size="default" @click="Billing()" class="nav-fl-lb4-botton">开票</u-button>
						</view>
					</u-col>
				</u-row>
			</view>
			<!-- 充值失败,驳回原因 -->
			<view class="nav-fl-lb Recharge-failed" v-if="curror == '0'">
				<u-row gutter="16" class="nav-fl-lb1">
					<u-col span="8">
						<view class="demo-layout bg-purple">账单ID：cz00681618384926</view>
					</u-col>
					<u-col span="4">
						<view class="demo-layout bg-purple-light">充值失败</view>
					</u-col>
				</u-row>
				<u-row gutter="16" class="nav-fl-lb2">
					<u-col span="8">
						<view class="demo-layout bg-purple">充值金额</view>
					</u-col>
					<u-col span="4">
						<view class="demo-layout bg-purple-light">+ 20000.00</view>
					</u-col>
				</u-row>
				<u-row gutter="16" class="nav-fl-lb3">
					<u-col span="12">
						<view class="demo-layout bg-purple">2021.04.14 15：06</view>
					</u-col>
				</u-row>
				<u-row gutter="16" class="nav-fl-lb4">
					<u-col span="9">
						<view class="demo-layout bg-purple">付款方式：支付宝支付</view>
					</u-col>
					<u-col span="3">
						<view class="demo-layout bg-purple-light">
							<view class="tck-box">
								<u-modal v-model="show" :content="content" show-confirm-button show-cancel-button title="驳回原因" confirm-text="重新开票" cancel-text="关闭"></u-modal>
								<u-button size="default" @click="open" type="error" class="nav-fl-lb4-botton">驳回原因</u-button>
							</view>
						</view>
					</u-col>
				</u-row>
			</view>
		</view>
		<bottom/>
	</view>
</template>

<script>
	import bottom from '../../components/bottom/index.vue'
	export default {
		components:{ bottom },
		data() {
			return {
				show: false,
				showa: false,
				showb: false,
				showc: false,
				showd: false,
				content: '开信息填写无法识别，请重新输入 再次开票',
				contenta: '1234',
				contentb: '快递单号：550013350311744',
				contentc: '确认支付2000元返佣费！',
				contentd: '您的账户余额不足！',
				title: 'Hello',
				curror: '0',
				list: [
					{
						name: '充值记录'
					}, 
					{
						name: '消费记录'
					}, 
					{
						name: '账单确认'
					}
				],
				current: 0
			}
		},
		onLoad() {
	
		},
		methods: {
			open() {
				this.show = true;
			},
			opena(){
				this.showa = true;
			},
			openb(){
				this.showb = true;
			},
			openc(){
				this.showc = true;
			},
			opend(){
				this.showd = true;
			},
			getCurror(index){
				this.curror = index
			},
			Recharge(){
				uni.navigateTo({
					url: '/pages/finance/Rechargepage'
				})
			},
			Billing(){
				uni.navigateTo({
					url: '/pages/finance/Billingpage'
				})
			},
		}
	}
</script>
<style>
	.tck-box  /deep/ .u-model{
		padding: 20px;
	}
	.tck-box  /deep/ .u-model__title{
		color: #666;
		font-weight: bold;
		padding: 0;
		text-align: left;
	}
	.tck-box  /deep/ .u-model__content__message{
		padding: 20px 0;
		text-align: left;
		color: #212121;
		line-height: 30px;
		text-align: justify;
		word-wrap: break-word;
		word-break: break-all;
		font-weight: 500;
	}
	.tck-box  /deep/ .u-model__footer{
		width: 75%;
		float: right;
	}
	.tck-box  /deep/ .u-model__footer__button{
		height: 35px;
		line-height: 35px;
		border-radius: 2px;
	}
	.tck-box  /deep/ .u-model__footer__button:nth-child(1){
		color: #999999 !important;
		background-color: #E5E5E5;
	}
	.tck-box  /deep/ .u-model__footer__button:nth-child(2){
		color: #ffffff !important;
		margin-left: 20px;
		background-color: #87B847;
	}
	.tck-box  /deep/ .u-border-top:after{
		border: 0;
	}
	.tck-box /deep/ .u-mode-center-box{
		border-radius: 5px !important;
	}
	/deep/ .u-size-default{
		height: 35px;
		color: #0A93FE;
	}
	/deep/ .u-size-default:after{
		border: 1px solid #fff;
	}
</style>
<style lang="less" scoped>
	.font-36{
		font-size: 36upx;
		font-weight: bold;
	}
	.jg-index{
		width: 100%;
		padding-bottom: 7vh;
		overflow: hidden;
	}
	.vertical-offset{
		width: 1px;
		border: 1px solid #F7FCFF;
		margin-left: 270upx;
		margin-right: 44upx;
	}
	.content {
		height: 387upx;
		width: 100%;
		overflow: scroll;
		background-image: url(../../static/back.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		// display: flex;
		// flex-direction: column;
		.site-header{
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-left: 29upx;
			padding-right: 29upx;
			margin-top: 80upx;
			.site-header-left{
				color: #FFFFFF;
			}
		}
	}
	.nav-fl{
		width: 100%;
		overflow-y: scroll;
		display: flex;
		margin-bottom: 40upx;
		.nav-fl-div{
			width: 150upx;
			height: 60upx;
			font-size: 25upx;
			background-color: #F4F9FE;
			line-height: 60upx;
			text-align: center;
			border-radius: 8upx;
			color: #666666;
			margin-right: 20upx;
		}
		.nav-fl-div-ch{
			width: 150upx;
			height: 60upx;
			font-size: 25upx;
			background-color: #0585F2;
			line-height: 60upx;
			text-align: center;
			border-radius: 8upx;
			color: #fff;
			border: 1upx solid #0585F2;
			margin-right: 20upx;
		}
	}
	.nav-contain{
		width: 100%;
		background-color: #FFFFFF;
		border-top-left-radius: 20upx;
		border-top-right-radius: 20upx;
		margin-top: -150upx;
		padding-left: 30upx;
		padding-right: 30upx;
		padding-top: 50upx;
	}
	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
	.nav-contain .nav-fl-lb{
		padding-bottom: 40upx;
		margin-bottom: 40upx;
		border-bottom: 1px solid #E5E5E5;
	}
	.nav-contain .nav-fl-lb:nth-last-child(1){
		margin-bottom: 0upx;
	}
	.nav-contain .nav-fl-lb .nav-fl-lb1{
		color: #666;
		margin-bottom: 20px;
	}
	.nav-contain .nav-fl-lb .bg-purple-light{
		text-align: right;
	}
	.nav-contain .nav-fl-lb .nav-fl-lb2{
		font-weight: bold;
		font-size: 33upx;
		margin-bottom: 5px;
	}
	.nav-contain .nav-fl-lb .nav-fl-lb3{
		color: #888;
		margin-bottom: 20px;
	}
	.nav-fl-lb-cancel{
		margin-bottom: 0px !important;
	}
	.nav-contain .nav-fl-lb .nav-fl-lb4{
		color: #666;
	}
	.nav-contain .nav-fl-lb .nav-fl-lb4 .nav-fl-lb4-botton{
		color: #0081F1;
		background-color: #E5F2FE;
	}
	.nav-contain .nav-fl-lb .nav-fl-lb4 .nav-fl-lb4-botton1{
		color: #888888;
		background-color: #E5E5E5;
	}
	.nav-contain .nav-fl-lb .nav-fl-lb4 .nav-fl-lb4-botton1:hover{
		color: #888888 !important;
		background-color: #E5E5E5 !important;
	}
	.nav-contain .Recharge-failed .nav-fl-lb1 .bg-purple-light{
		color: #E60012;
	}
	.nav-contain .Recharge-failed .nav-fl-lb4 .nav-fl-lb4-botton{
		color: #E60012;
		background-color: #FCE5E7;
	}
	.nav-contain .Recharge-failed .nav-fl-lb4 .nav-fl-lb4-botton:hover{
		color: #E60012 !important;
		background-color: #FCE5E7 !important;
	}
</style>
